<template>
  <div id="map">
    <component
      @getPath="handleGetPath"
      @getSearch="handleGetSearch"
      v-bind:is="comName"
    ></component>
  </div>
</template>
<script>
import search from "../component/search";
import pathl from "../component/path";

import Map from "ol/Map";
import View from "ol/View";

import {layers, overlay, config } from "../../assets/js/map.js";

export default {
  name: "home",
  components: { search, pathl },
  data() {
    return {
      comName: "search",
      map: null
    };
  },
  methods: {
    // 切换为路径面板
    handleGetPath: function() {
      this.comName = "pathl";
    },

    // 切换为搜索面板
    handleGetSearch: function() {
      this.comName = "search";
    },

    // 初始化地图
    initMap: function() {
      // 地图模块
      var map = new Map({
        layers: [
          layers.baseLayer,
          // layers.pointLayer,
          layers.lineLayer,
          layers.shortestPathLayer,
          layers.iconFeatureLayer
        ],
        target: "map",
        view: new View({
          center: [120.54793,30.62939],
          zoom: 14,
          projection: 'EPSG:4326',
        })
      });
      // 右键事件
      map.getViewport().oncontextmenu = function(e){
        e.preventDefault();
        // 设置overlay的地图源
        overlay.setMap(map);
        // 获取点击坐标
        var coordinate = map.getEventCoordinate(e);
        overlay.setPosition(coordinate);
      };
      // 左键事件
      map.getViewport().onclick = function(e){ 
        e.preventDefault();
        overlay.setPosition(undefined);
      }
      // map.on("click",function(data){
      //   console.log(map.getViewport())
      // });
    }
  },
  mounted: function(){
    // console.log(overlay);
      this.initMap();
  }
};
</script>
<style lang="scss" scoped>
#map {
    width: 100%;
    height: 100%;
}
</style>
